<template>
	<view class="user">
		<view class="top_log">
			<view class="img">
				<image class="avatar" src="../../static/avatar1.png" mode=""></image>
			</view>
			<view class="user-name">
				<text class="user-text">骑行虾18077172</text>
				<view class="user-vip">
					<image class="vip-img" src="../../static/user-vip.png" mode=""></image>
					普通会员
				</view>
			</view>
			<view class="user-setting">
				<view class="icon-cur">
					<u-icon class="" name="server-fill" size="20px" color="#000000"></u-icon>
					<text class="user_text_s">客服</text>
				</view>
				<view style="margin-left: 20px;" @click="GotoSetting">
					<u-icon name='setting' size="20px" color="#000000"></u-icon>
					<text class="user_text_s">设置</text>
				</view>
			</view>
		</view>
		<view class="menu-main">
			<Card_M class="menu_order">
				<view class="menu">
					<view class="user-menu" @click="Goto_Allorder">
						<image src="../../static/order-all.png" mode=""></image>
						<text>全部订单</text>
					</view>
					<view class="user-menu">
						<image src="../../static/order-wait.png" mode=""></image>
						<text>待支付</text>
					</view>
					<view class="user-menu">
						<image src="../../static/order.png" mode=""></image>
						<text>进行中</text>
					</view>
					<view class="user-menu">
						<image src="../../static/order-finsh.png" mode=""></image>
						<text>已完成</text>
					</view>
				</view>
			</Card_M>
		</view>
		<view class="travel-data menu-main">
			<Card_M>
				<view class="travel">
					<view class="title">
						<view class="h1">
							<text>出行数据</text>
						</view>
<!-- 						<view class="travel-day">
							<image src="../../static/travel-day.png" mode=""></image>
							<text>{{day}}</text>
						</view> -->
					</view>
				</view>
				<view class="data menu-travel">
					<view class="data-menu">
						<view class="data-menu-1">
							<text class="max">{{travel['all']}}</text>
							<text class="min">km</text>
						</view>
						<text class="min-1">总里程</text>
					</view>
					<view class="data-menu">
						<view class="data-menu-1">
							<text class="max">{{travel['travel']}}</text>
							<text class="min">次</text>
						</view>
						<text class="min-1">出行次数</text>
					</view>
					<view class="data-menu">
						<view class="data-menu-1">
							<text class="max">{{travel['Kilocalorie']}}</text>
							<text class="min">千卡</text>
						</view>
						<text class="min-1">消耗卡路里</text>
					</view>
					<view class="data-menu">
						<view class="data-menu-1">
							<text class="max">{{travel['weight']}}</text>
							<text class="min">kg</text>
						</view>
						<text class="min-1">减少碳排放</text>
					</view>
				</view>
			</Card_M>
		</view>
		<view class="travel-data menu-main">
			<Card_M>
				<view class="travel">
					<view class="title">
						<view class="h1">
							<text>精选服务</text>
						</view>
					</view>
				</view>
				<view class="data menu-travel">
					<view class="data-menu">
						<view class="data-menu-1">
							<image src="../../static/welfare.png" mode=""></image>
						</view>
						<text class="min-1">福利中心</text>
					</view>

					<view class="data-menu">
						<view class="data-menu-1">
							<image src="../../static/优惠券.png" mode=""></image>
						</view>
						<text class="min-1">卡券中心</text>
					</view>
					<view class="data-menu">
						<view class="data-menu-1">
							<image src="../../static/explain.png" mode=""></image>
						</view>
						<text class="min-1">使用说明</text>
					</view>
				</view>
			</Card_M>
		</view>

	</view>
	<view class="huangzheng">
		by@HuangZheng
	</view>
</template>

<script>
	import Card_M from "../compents/card.vue"
	export default {
		data() {
			return {
				day: '你已经100天没出行啦，期待你的再次出行',
				travel: {
					all: '56.0',
					travel: '66',
					Kilocalorie: '1432',
					weight: '2.7',
				}
			}
		},
		methods: {
			Goto_Allorder(){
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			GotoSetting(){
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			}
		},
		components: {
			Card_M
		},
	}
</script>

<style scoped>
.user {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto;
}
.top_log {
	display: flex;
	width: 100%;
	position: relative;
	margin: 0 auto;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	background: linear-gradient(to bottom, #77c7eb, #ffffff);
	
	
}
.img {
	height: 50px;
	width: 50px;
	padding: 4px;
	background-color: #ffffff;
	border-radius: 100%;
}
.avatar {
	height: 100%;
	width: 100%;
	background-color: #b4e8ff;
	
	border-radius: 100%;
}
.user-name {
	margin-left: 10px;
}
.user-vip {
	display: flex;
	margin-top: 10px;
	padding: 4px;
	font-size: 12px;
	background: linear-gradient(45deg, #D7E8FF 1%,#00aaff 99%);
	border-radius: 30px;
	align-items: center;
	color: #ffffff;
}
.user-text {
	font-size: 15px;
}
.vip {
	margin-right: 5px;
	display: flex;
	
}

.user-setting{
	/* width: 60px; */
	height: 100%;
	position: absolute;
	right: 30px;
	display: flex;
	align-items: center;
	color: #000000;
}
.icon_cur {
	margin-right: 20px;
}
.user_text_s {
	font-size: 12px;
	color: #545454;
}
.menu-main {
	width: 95%;
	position: relative;
	margin: 20px auto;
}
.menu_order {
	
}
.menu {
	display: flex;
	margin-top: 20px;
	justify-content: space-around;
	padding-top: 10px;
	padding-bottom: 10px;
}
.user-menu{
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	align-items: center;
	
}
.user-menu >image {
	height: 20px;
	width: 20px;
}
.title {
	display: flex;
	
}
.menu-travel {
	display: flex;
	margin-top: 10px;
	justify-content: space-around;
	padding-top: 10px;
	padding-bottom: 10px;
}
.travel-day {
	font-size: 1px;
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	height: 100%;
	background-color: #99cbff;
	
}
.travel-day > image {
	height: 100%;
	background-color: #ffffff;
	width: 18px;
	transform: translateX(-50%);
}
.h1 {
	position: relative;
	left: 10px;
	font-weight: 700;
	margin-top: 10px;
}
.data-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.data-menu-1 {
	text-align: center;
}
.max {
	font-weight: 700;
}
.min {
	font-size: 12px;
}
.min-1 {
	margin-top: 5px;
	text-align: center;
	font-size: 12px;
}
.data-menu-1 >image {
	height: 20px;
	width: 20px;
}
.huangzheng {
	position: absolute;
	bottom: 5px;
	text-align: center;
	width: 100%;
	color: #545454;
	font-size: 12px;
}
.vip-img {
	height: 15px;
	width: 15px;
}
</style>
